<template>
  <div class="w-row-col" :style="wRowColStyle">
    <!-- grid-area: y1/x1/y2/x2 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'WRowCol',
  props: {
    span: {
      type: Number,
      default: 3
    },
    gutter: {
      type: [Number, String],
      default: 0
    },
    rowGutter: {
      type: [Number, String],
      default: 0
    }
  },
  computed: {
    wRowColStyle() {
      return {
        'grid-template-columns': `repeat(${this.span}, 1fr)`,
        'grid-column-gap': this.getVal(this.gutter),
        'grid-row-gap': this.getVal(this.rowGutter)
      }
    }
  },
  methods: {
    getVal(val) {
      if (typeof val === 'number' || typeof Number(val) === 'number') {
        return `${val}px`
      }

      if (isNaN(val) && parseInt(val) >= 0) {
        return val
      }

      return '0px'
    }
  }
}
</script>

<style scoped lang="scss">
.w-row-col {
  display: grid;
  grid-column-gap: 100px;
}
</style>
